<template>
  <div>
    <div class="lable-top in">
      <el-row :gutter="10">
        <el-col :span="2">
          <el-button size="small" @click="handleButtonCommend('CommandDelete')">
            指令删除
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button
            class="group50"
            size="small"
            @click="handleButtonCommend('CommandEnable')"
          >
            指令启用
          </el-button>
          <el-button
            class="group50"
            size="small"
            @click="handleButtonCommend('CommandDisable')"
          >
            指令禁用
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button
            class="group30"
            size="small"
            @click="handleButtonCommend('CommandSetName')"
          >
            指令名设置
          </el-button>
          <el-button
            class="group30"
            size="small"
            @click="handleButtonCommend('CommandSetDesc')"
          >
            指令描述设置
          </el-button>
          <el-button
            class="group30"
            size="small"
            @click="handleButtonCommend('CommandSetModel')"
          >
            指令参数模型设置
          </el-button>
        </el-col>
        <el-col :span="10">
          <div style="opacity: 0">1</div>
        </el-col>
        <el-col :span="2">
          <el-button size="small" @click="$refs.InstructionAdd.show()">
            创建新指令
          </el-button>
        </el-col>
      </el-row>
      <el-table
        class="mt10"
        :data="tableData"
        :header-cell-style="{ background: '#f5f5f5' }"
        size="mini"
      >
        <el-table-column label="选择" width="60">
          <template slot-scope="scope">
            <el-radio
              v-model="tableSelect"
              :label="scope.row.type"
              style="margin-left: 10px;"
              @change="getTemplateRow(scope.row.type)"
            >
              &nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column label="指令ID" prop="type" />
        <el-table-column label="指令名" prop="name" />
        <el-table-column label="指令更新时间" prop="update_time" />
        <el-table-column label="指令状态">
          <template slot-scope="scope">
            <div
              :class="['status', scope.row.disabled ? 'fail' : 'success']"
            ></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="f12" type="text" @click="handleClickDesc(scope.row)">
              查看细节
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="mt10 el-row--flex is-justify-end">
        <el-pagination
		  small
          background
          :current-page="page"
          layout="total, prev, pager, next"
          :page-size="limit"
          :page-sizes="[100, 200, 300, 400]"
          :total="count"
          @current-change="handleCurrentChangePage"
        />
      </div>

      <el-form class="mt10" label-position="top" size="mini">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="指令描述:">
              <el-input
                :autosize="{ minRows: 6, maxRows: 10 }"
                readonly
                type="textarea"
                :value="desc.desc"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="指令参数模型:">
              <json-viewer
			    expanded
				preview-mode
                boxed
                copyable
                :expand-depth="5"
                sort
                :value="desc.model"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <instruction-desc ref="InstructionDesc" @change="loadingList" />
      <instruction-model ref="InstructionModel" @change="loadingList" />
      <instruction-of ref="InstructionOf" @change="loadingList" />
      <instruction-add ref="InstructionAdd" @change="loadingList" />
    </div>
  </div>
</template>

<script>
import InstructionModel from "@/views/response/toast/instructionModel";
import InstructionDesc from "@/views/response/toast/instructionDesc";
import InstructionOf from "@/views/response/toast/instructionOf";
import InstructionAdd from "@/views/response/toast/instructionAdd";
import response from "@/api/response";
import radioTable from "@/utils/mixin/radioTable";
import checkSelectTable from "@/utils/mixin/checkSelectTable";
import org_getall from "@/utils/mixin/org_getall";
import JsonViewer from "vue-json-viewer";
export default {
  name: "Instruction",
  components: {
    InstructionAdd,
    InstructionOf,
    InstructionDesc,
    InstructionModel,
    JsonViewer
  },
  mixins: [org_getall, checkSelectTable, radioTable],
  data: () => {
    return {
      limit: 20,
      page: 1,
      count: 0,
      tableData: [],
      desc: {
        desc: "",
        model: {}
      }
    };
  },
  mounted() {
    this.loadingList();
  },
  methods: {
    getData() {},
    handleClickDesc(row) {
      this.desc.desc = row.description;
      this.desc.model = row.data_model;
    },
    handleCommandSetModel({ type }) {
      this.$refs.InstructionModel.show(type);
    },
    handleCommandSetDesc({ type }) {
      this.$refs.InstructionDesc.show(type);
    },
    handleCommandSetName({ type }) {
      this.$refs.InstructionOf.show(type);
    },
    handleCommandDisable({ type }) {
      response.disable({ type }).then(res => {
        this.$message.success(res.data.message);
        this.loadingList();
      });
    },
    handleCommandEnable({ type }) {
      response.enable({ type }).then(res => {
        this.$message.success(res.data.message);
        this.loadingList();
      });
    },
    handleCommandDelete({ type }) {
      response.del({ type }).then(res => {
        this.$message.success(res.data.message);
        this.loadingList();
      });
    },
    handleCurrentChangePage(val) {
      this.page = val;
      this.loadingList();
    },
    handleButtonCommend(module) {
      let data = {};
      this.is_check_table("type") &&
        (data = this.is_get_select_data()) &&
        this[`handle${module}`](data);
    },
    loadingList() {
      response
        .list({
          limit: this.limit,
          page: this.page
        })
        .then(res => {
          this.tableData = res.data.command_list;
          this.count = res.data.count;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.group50 {
  width: 50% !important;
  margin-left: 0 !important;
}
.group30 {
  width: 33.3333% !important;
  margin-left: 0 !important;
}
::v-deep .in .el-button {
  width: 100%;
}
.status {
  width: 15px;
  height: 15px;
  border-radius: 100px;
}
.success {
  background-color: $--color-success;
}
.fail {
  background-color: $--color-danger;
}
</style>
